<template>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 元数据输入 -->
    <div class="space-y-4">
      <div class="section-card">
        <input v-model="title" placeholder="歌曲标题" class="input-field">
      </div>
    </div>
    
    <!-- 乐谱预览 -->
    <div class="lg:col-span-2 section-card h-full">
      <div id="sheet-preview" class="p-4">
        <div v-for="(bar, index) in bars" :key="index" class="bar-preview">
          {{ bar.join(' ') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('')
const bars = ref([])
</script>

<style>
.bar-preview {
  @apply mb-4 p-2 border border-gray-200 rounded;
  font-family: 'Noto Music', sans-serif;
  font-size: 1.2rem;
}
</style>